<!DOCTYPE html>
<html lang="zh">

<head th:replace="/fragment/head::user-head(~{::title},~{})">
    <title>博客编辑</title>
</head>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <div id="app">
        <nav th:replace="/fragment/nav::nav2"></nav>
        <div class="ui container">
            <form th:action="@{/blog}" class="ui form" method="POST">
                <input type="text" hidden th:value="${session.uid}" name="uid">
                <div class="ui error message"></div>
                <div class="required field">
                    <div class="ui left labeled input">
                        <div class="ui selection dropdown label">
                            <input type="hidden" name="attr">
                            <i class="dropdown icon"></i>
                            <div class="default text">类型</div>
                            <div class="menu">
                                <div class="item" data-value="0">原创</div>
                                <div class="item" data-value="1">转载</div>
                            </div>
                        </div>
                        <input type="text" placeholder="标题" name="title">
                    </div>
                </div>
                <div class="field">
                    <div id="md-content" style="z-index: 1 !important;height: 500px;">
                        <textarea name="content">[[${text}]]</textarea>
                    </div>
                </div>
                <div class="fields">
                    <div class="field">
                        <div class="ui selection dropdown">
                            <input type="hidden" name="fid">
                            <i class="tags icon"></i>分类|
                            <i class="dropdown icon"></i>
                            <div class="default text">类别</div>
                            <div class="menu">
                                <div class="item" v-for="e in favorites" :data-value="e.fid">{{e.name}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui labeled input">
                            <label class="ui label">
                                <i class="image icon"></i>
                                https://
                            </label>
                            <input type="text" placeholder="图片地址" name="img">
                        </div>
                    </div>
                    <div class="field">
                        <input type="text" hidden name="publish" id="publish">
                    </div>
                </div>

                <div class="ui container right aligned">
                    <button class="ui button" onclick="window.history.go(-1)">返回</button>
                    <button class="ui secondary button" onclick="isPublish('false')">保存</button>
                    <button class="ui teal button" onclick="isPublish('true')">发布</button>
                </div>
                <script>
                    function isPublish(v) {
                        $("#publish").val(v);
                    }
                </script>
            </form>
        </div>
        <footer th:replace="/fragment/footer::f1"></footer>
    </div>
    <script th:replace="/fragment/script::jquery"></script>
    <div th:replace="fragment/editor::ed('100%','40em')"></div>
    <script th:replace="/fragment/script::semantic"></script>
    <script th:replace="/fragment/script::mobile-hide"></script>
    <script th:replace="/fragment/script::dropdown"></script>
    <script th:replace="/fragment/script::vue"></script>
    <template>
        <div class="item" data-value="1">原创</div>
    </template>
    <script th:if="${msg}">
        alert('[[${msg}]]')
    </script>
    <script>
        const ajax = {
            data() {
                return {
                    favorites: []
                }
            },
            mounted() {
                getJson('/getFavorites/[[${session.uid}]]', (r) => {
                    this.favorites = r.list;
                })
            }
        }

        const app = Vue.createApp(ajax)

        app.component('article-info', {
            props: ['root', 'article'],
            template: '#ac'
        })
        app.mount('#app')
    </script>
    <!-- 校验 -->
    <script>
        $('.ui.form').form({
            fields: {
                title: {
                    identifier: 'title',
                    rules: [
                        {
                            type: 'empty',
                            prompt: '请输入标题'
                        }
                    ]
                },
                content: {
                    identifier: 'content',
                    rules: [
                        {
                            type: 'empty',
                            prompt: '请输入内容'
                        }
                    ]
                }
            }
        });
    </script>
</body>

</html>